<?php
use yii\helpers\Html;
use backend\modules\statistics\assets\EchartsAsset;
EchartsAsset::register($this);

$this->title = '用户相关统计';

?>


<section class="wrapper site-min-height">
    <!-- page start-->
    <section class="panel">
        <header class="panel-heading">
              <?= Html::a('返回','javascript:history.back(-1)'); ?>  <?= Html::encode($this->title) ?>
        </header>

        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div class="row">
            <div class="col-md-6 ">
                <div id="qubian" style="height: 500px;width: 90%;"></div>
            </div>
            <div class="col-md-6 ">
                <div id="gender" style="height: 500px;width: 90%;"></div>
            </div>
        </div>

    </section>
</section>




<script>
    <?php $this->beginBlock('js_zhexian') ?>
        var base = +new Date(2017, 4, 1);
        var oneDay = 24 * 3600 * 1000;
        var date = [];

//        var data = [Math.random() * 300];
        var data = <?=$user;?>;
        console.log(data);

        for (var i = 1; i < data.length; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
//            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }

        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '用户天变化曲线图',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name:'用户数',
                    type:'line',
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgb(255, 70, 131)'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }])
                        }
                    },
                    data: data
                }
            ]
        };

    // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('qubian'));
        myChart.setOption(option);
    <?php $this->endBlock('js_zhexian') ?>
    <?php $this->registerJs($this->blocks['js_zhexian'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>



</script>

<!--饼状图-->
<script>
    <?php $this->beginBlock('js_zhexian') ?>
    option = {
        title : {
            text: '用户性别统计',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['男','女']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:<?=$genderdata['mannum']?>, name:'男'},
                    {value:<?=$genderdata['womannum']?>, name:'女'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('gender'));
    myChart.setOption(option);
    <?php $this->endBlock('js_zhexian') ?>
    <?php $this->registerJs($this->blocks['js_zhexian'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>



</script>


